<template>
  <div>
    <el-button
      type="primary"
      @click="handleAddClass(1)"
      style="margin-bottom: 20px;"
      size="small"
    >添加一级分类</el-button>
    <el-table
      :data="tableData"
      style="width: 100%;margin-bottom: 20px;"
      row-key="id"
      border
      default-expand-all
      :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
    >
      <el-table-column prop="docTypeName" label="类型名称" sortable align="center"></el-table-column>
      <el-table-column label="操作" sortable align="center">
        <template slot-scope="scope">
          <el-button
            v-for="(item, index) in scope.row.handle"
            :key="index"
            size="mini"
            :type="item.type"
            @click="handleTableClick(scope.row, item.clickName)"
          >{{ item.handleName }}</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import {
  allDocTypeList,
  addDocType,
  deleteDocType,
  updateDocType,
} from "@/service/Api";
import handleSetting from "./handleSetting";
export default {
  name: "documentSetting",
  data() {
    return {
      data: [], //接口数据
      tableData: [],
    };
  },
  created() {
    this.getList();
  },
  methods: {
    handleAddClass(type, pid = "") {
      this.$prompt("请输入类型名称", `添加${type === 1 ? "一" : "二"}级类型`, {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        inputValidator: this.validator,
      })
        .then(({ value }) => {
          addDocType({
            docTypeName: value,
            level: type,
            parentId: pid,
          }).then((res) => {
            this.$message.success("添加成功");
            this.getList();
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "取消输入",
          });
        });
    },
    validator(val) {
      if (!val) return "请输入类型名称";
      else return true;
    },
    getList() {
      allDocTypeList().then((res) => {
        if (res.code === 0) {
          this.data = res.data;
          this.splitScore();
        }
      });
    },
    //切割数据
    splitScore() {
      if (this.data.length === 0) return;
      //查找所有的一级分类
      const first = this.data.map((item) => item.levelOne);
      //查找所有二级分类
      const second = this.data.map((item) => item.levelTwo);
      //组合数据
      const dataScore = [];
      first.forEach((item) => {
        item.handle = handleSetting.first;
      });
      second.forEach((item, index) => {
        item.forEach((r) => {
          r.handle = handleSetting.second;
        });
        first[index].children = item;
      });
      dataScore.push(...first);
      this.tableData = dataScore;
    },
    addTwoType(row) {
      this.handleAddClass(2, row.id);
    },
    handleTableClick(row, name) {
      this[name](row);
    },
    editType(row) {
      this.$prompt(
        "请修改类型名称",
        `修改${row.level === 1 ? "一" : "二"}级类型`,
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          inputValue: `${row.docTypeName}`,
          inputValidator: this.validator,
        }
      )
        .then(({ value }) => {
          updateDocType({
            id: row.id,
            docTypeName: value,
          }).then((res) => {
            if (res.code === 0) {
              this.$message.success("修改成功");
              this.getList();
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "取消输入",
          });
        });
    },
    deleteType(row) {
      deleteDocType(row.id).then((res) => {
        if (res.code === 0) {
          this.$message.success("删除成功");
          this.getList();
        } else {
          this.$message.error(res.message);
        }
      });
    },
  },
};
</script>

<style scoped>
</style>
